<template>
	<view class="buk-rate-capsule">
		<view class="buk-rate-capsule__content" :class="text?'bg-color':''">
			<text class="buk-rate-capsule__content__text">{{getText(rate)}}</text>
			<view class="buk-rate-capsule__content__rate">
				<uni-icons customPrefix="ax-icon" type="ax-icon-wujiaoxing" size="15" color="#FADEAB"></uni-icons>
				<text class="buk-rate-capsule__content__rate__number">{{rate}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "buk-rate-capsule",
		data() {
			return {

			};
		},
		props: {
			text: {
				type: String,
				default: ""
			},
			rate: {
				type: String,
				default: "4.0"
			}
		},
		computed: {
			/**
			 * 获取文字
			 */

		},
		methods: {
			getText() {	
				return this.text !== '' ? this.text : t
			},
			getText(rate){
			  switch (parseInt(rate)) {
			    case 5:
			      return '超棒'
			    case 4:
			      return '棒'
			    case 3:
			      return '很好'
			    default:
			      return '不错'
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-color {
		background-color: #FADEAB;
	}

	.buk-rate-capsule {
		display: flex;
		align-items: center;
		flex-direction: column;

		&__content {

			height: 46rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			position: relative;

			&__text {
				margin-left: 112rpx;
				font-size: 24rpx;
				color: #3D3D3D;
				margin-right: 16rpx;
				font-weight: 500;
			}

			&__rate {
				position: absolute;
				top: 0;
				left: 0;
				width: 96rpx;
				height: 46rpx;
				background: #666666;
				border-radius: 30rpx 4rpx 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&__number {
					font-size: 24rpx;
					color: #FADEAB;
				}
			}
		}
	}
</style>